@extends("admin.layouts.main")
<style>
    .card-body .form-group {
        width: 28%;
    }

    @media screen and (max-width: 1024px) {
        .card-body .form-group {
            width: 100% !important;
        }
    }

    .show-item {
        top: 40px;
        width: 75%;
        right: 15px;
        z-index: 10;
        background: white;
        overflow: hidden;
        display: none;
    }

    .showMsg li {
        padding-bottom: 5px;
        cursor: pointer;
        padding: 10px 8px;
        margin: 2px 0;
    }

    .showMsg li:hover {
        background-color: #f2f2f2;
    }

    input::-webkit-input-placeholder { /* WebKit browsers */
        font-size: 13px;
    }

    input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
        font-size: 13px;
    }

    input:-ms-input-placeholder { /* Internet Explorer 10+ */
        font-size: 13px;
    }
</style>
<meta name="csrf-token" content="{{ csrf_token() }}">
@section("content")
<div class="container-fiuld p-3" id="app">
    <div class="card">
        <div class="card-body">
            <div class="pt-2 pb-2 d-flex justify-content-between align-items-center"
                 style="background-color:#f2f2f2;font-size:18px;">
                <h4 class="pl-2">添加公会</h4>
                <a href="{{ route('guild.index') }}" class="btn btn-link">返回</a>
            </div>
            <form class="layui-form mt-3">
                <div class="row align-items-center mb-3">
                    <div class="col-2 text-right">
                        <label class="mb-0">所属公会:</label>
                    </div>
                    <div class="col-4 d-flex position-relative">
                        <input type="text" class="form-control rounded-0 w-25" id="uid" name="gid" value="0"
                               placeholder="公会ID" disabled>
                        <input type="text" class="form-control rounded-0" id="handleChange" name="username"
                               placeholder="请输入公会名称">
                        <div class="position-absolute show-item">
                            <ul class="showMsg">
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="row align-items-center mb-3">
                    <div class="col-2 text-right">
                        <label class="mb-0">登录用户名:</label>
                    </div>
                    <div class="col-4">
                        <input type="text" class="form-control" name="username" required lay-verify="required"
                               id="username" placeholder="请输入用户名"/>
                    </div>
                </div>
                <div class="row align-items-center mb-3">
                    <div class="col-2 text-right">
                        <label class="mb-0">登录密码:</label>
                    </div>
                    <div class="col-4">
                        <input type="password" class="form-control" name="password" required lay-verify="required"
                               id="pwd" placeholder="请输入密码"/>
                    </div>
                </div>
                <div class="row align-items-center mb-3">
                    <div class="col-2 text-right">
                        <label class="mb-0">公会老板:</label>
                    </div>
                    <div class="col-4">
                        <input type="text" class="form-control" name="boss_name" lay-verify="required"
                               placeholder="需要真实姓名并保持和提现账户一致"/>
                    </div>
                </div>
                <div class="row align-items-center mb-3">
                    <div class="col-2 text-right">
                        <label class="mb-0">手机:</label>
                    </div>
                    <div class="col-4">
                        <input type="text" class="form-control" name="mobile" lay-verify="required"
                               placeholder="请输入手机"/>
                    </div>
                </div>
                <div class="row align-items-center mb-3">
                    <div class="col-2 text-right">
                        <label class="mb-0">座机:</label>
                    </div>
                    <div class="col-4">
                        <input type="text" class="form-control" name="tel" placeholder="请输入座机"/>
                    </div>
                    <span class="col-4 text-danger">例：xxxx-xxxxxxxx</span>
                </div>
                <div class="row align-items-center mb-3">
                    <div class="col-2 text-right">
                        <label class="mb-0">微信:</label>
                    </div>
                    <div class="col-4">
                        <input type="text" class="form-control" name="wechat" lay-verify="required"
                               placeholder="请输入微信"/>
                    </div>
                </div>
                <div class="row align-items-center mb-3">
                    <div class="col-2 text-right">
                        <label class="mb-0">QQ:</label>
                    </div>
                    <div class="col-4">
                        <input type="text" class="form-control" name="qq" lay-verify="required" placeholder="请输入QQ"/>
                    </div>
                </div>
                <div class="row align-items-center mb-3">
                    <div class="col-2 text-right">
                        <label class="mb-0">邮箱:</label>
                    </div>
                    <div class="col-4">
                        <input type="text" class="form-control" name="email" lay-verify="required" placeholder="请输入邮箱"/>
                    </div>
                </div>
                <div class="row align-items-center mb-3">
                    <div class="col-2 text-right">
                        <label class="mb-0">指定客服:</label>
                    </div>
                    <div class="col-4">
                        <input type="text" class="form-control" name="kefu" lay-verify="required"
                               placeholder="公会指定的工作对接人"/>
                    </div>
                </div>
                <div class="row align-items-center mb-3">
                    <div class="col-2 text-right">
                        <label class="mb-0">地址:</label>
                    </div>
                    <div class="col-4">
                        <input type="text" class="form-control" name="address" lay-verify="required"
                               placeholder="需要可收快递、上门考察的真实联系地址"/>
                    </div>
                </div>
				@if(in_array('guild.store', $menuRule))
                <div class="col-4 offset-2 text-center">
                    <button class="layui-btn" lay-submit lay-filter="create-guild" data-url="{{ route('guild.store') }}"
                            data-type="POST">提交
                    </button>
                    <button type="reset" class="layui-btn layui-btn-danger">重置</button>
                </div>
				@endif
            </form>
            <!-- <div class="alert alert-info mt-3 w-25">
              <strong>信息!</strong> 上传后不可自行修改，如需修改请联系专属客服
            </div> -->
        </div>
    </div>
</div>
@endsection
@section("js")
<script>
    //数据操作
    layui.use(["form", "layer","ori"], function () {
        var $ = layui.$,ori = layui.ori;
        //重置
        ori.reset("[type=reset]");
        $("body").click(function () {
            $(".show-item").css({"display": "none"});
            $(".showMsg").html("");
        })
        $(".showMsg").on("click", "li", function () {
            var html = $(this).html();
            if (html == "无相关信息加载") {
                $('#uid').val(0)
                $(".show-item").css({"display": "none"})
                $(".showMsg").html("");
                return;
            }
            if (html.indexOf("ID") != -1) {
                var id = html.split("ID")[1].trim();
            }
            if ($("#uid").val(id)) {
                $('#uid').val(id)
            } else {
            }
            $(".show-item").css({"display": "none"})
            $(".showMsg").html("");
        })
        $("#handleChange").on("input propertychange", "", function (e) {
            e.preventDefault();
            $(".show-item").css({"display": "block"})
            $.ajaxSetup({headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}});
            var username = $(this).val();
            if (!username) {
                $(".showMsg").html(`<li>无相关信息加载</li>`);
                return;
            }
            $.ajax({
                url: "/admin/guildsearch",
                data: {username},
                type: "POST",
                success: function (res) {
                    var html = "";
                    if (res.length == 0) {
                        $(".showMsg").html(`<li>无相关信息加载</li>`);
                        return;
                    }
                    for (var i = 0; i < res.length; i++) {
                        html +=
                            `<li><i class="layui-icon layui-icon-username"></i>${res[i].username} #ID ${res[i].id}</li>`
                    }
                    $(".showMsg").html(html);
                },
                error: function (err) {
                    $(".showMsg").html(`<li>错误</li>`);
                }
            })
        })
        //获取下面表单的ID
    })
    layui.use(['form', 'oriagain', 'layer'], function () {
        var form = layui.form, oriagain = layui.oriagain, $ = layui.$, layer = layui.layer;
        form.on('submit(create-guild)', function (data) {
            oriagain.submit($(this), data.field, function () {
                var index = layer.open({
                    title: '结果',
                    content: '添加成功',
                    btn: ["继续添加", "返回列表"],
                    btn1: function () {
                        $('.layui-form')[0].reset();
                        layer.close(index);
                    },
                    btn2: function () {
                        window.history.go(-1)
                    }
                });
            });
            return false;
        });
    })
</script>
@endsection
